<template>
    <div class="control-section">
      <div class="col-md-8 control-section">
          <ejs-chart ref="chart" style='display:block' :theme='theme' align='center' id='chartcontainer' :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
              :chartArea='chartArea' :legendSettings='legendSettings' :selectionMode='seriesMode'>
              <e-series-collection>
                  <e-series :dataSource='seriesData'  type='Scatter' xName='x' yName='y' name='Product A' :marker='marker'> </e-series>
                  <e-series :dataSource='seriesData1' type='Scatter' xName='x' yName='y' name='Product B' :marker='marker1' > </e-series>
                  
  
              </e-series-collection>
          </ejs-chart>
      </div>
      <div>

    <div class="col-md-4 property-section">
        <table id="property" title="Properties" style="width: 100%">
            <br/><br/>
            <tr style="height: 50px">
               <td>
                  <div>Selection Mode</div>
               </td>
               <td>
                  <div>
                       <ejs-dropdownlist id='selmode' :change='mode' :dataSource='selectdata' index=0 :width='selectwidth' ></ejs-dropdownlist>  
                  </div>
               </td>
            </tr>
        </table>
    </div>
</div>
<div id="action-description">
    <p>
        This sample illustrates the range selection feature in chart. Data can be selected under region by drag and drop.
    </p>
</div>
<div id="description">
    <p>
        This sample demonstrates the selection behavior in a chart. Any point or a series can be selected in a chart by clicking or touching the point. 
        We can also select the point while loading chart through <code>selectedDataIndexes</code> properties. Click to select a point or series, click and drag to enable rectangular selection. 
        Rectangular selection will return the collection point that are selected under the region.  
    </p>
    <p>
         Tap to select a point or series, double tap and drag to enable rectangular selection in touch enabled devices.
    </p>
    <p>Chart supports five mode of selection which can be set using <code>SelectionMode</code> property.
    </p>
    <ul>
          <li><code>Series</code> - Select the series in chart.</li>
          <li><code>Point</code> - Select a point in the series .</li>
          <li><code>Cluster</code> - Select a group of points in the chart.</li>
          <li><code>DragXY</code> - Rectangular selection with respect to both axis.</li>
          <li><code>DragX</code> - Rectangular selection with respect to horizontal axis.</li>
          <li><code>DragY</code> - Rectangular selection with respect to vertical axis.</li>
    </ul> 
    <br>
    <p style="font-weight: 500">Injecting Module</p>
    <p>
          Chart component features are segregated into individual feature-wise modules. To use selection feature, we need to inject
          <code>Selection</code> module using <code>provide: { chart: [ Selection ] },</code> method.
     </p> 
</div>

  </div>
  
  </template>
  <style>
  
  </style>
  <script>
  import Vue from "vue";
  import { Browser } from '@syncfusion/ej2-base';
  import { DropDownList } from '@syncfusion/ej2-vue-dropdowns';
  import { ChartPlugin, Selection, ScatterSeries, ColumnSeries, Legend, Category} from "@syncfusion/ej2-vue-charts";
  Vue.use(ChartPlugin);

let selectedTheme = location.hash.split("/")[1];
selectedTheme = selectedTheme ? selectedTheme : "Material";
let theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, "Dark");

  export default Vue.extend({
    data: function() {
      return {
           theme: theme,
        seriesData: [
                    { x: 1971, y: 50 }, { x: 1972, y: 20 }, { x: 1973, y: 63 }, { x: 1974, y: 81 }, { x: 1975, y: 64 },
                    { x: 1976, y: 36 }, { x: 1977, y: 22 }, { x: 1978, y: 78 }, { x: 1979, y: 60 }, { x: 1980, y: 41 },
                    { x: 1981, y: 62 }, { x: 1982, y: 56 }, { x: 1983, y: 96 }, { x: 1984, y: 48 }, { x: 1985, y: 23 },
                    { x: 1986, y: 54 }, { x: 1987, y: 73 }, { x: 1988, y: 56 }, { x: 1989, y: 67 }, { x: 1990, y: 79 },
                    { x: 1991, y: 18 }, { x: 1992, y: 78 }, { x: 1993, y: 92 }, { x: 1994, y: 43 }, { x: 1995, y: 29 },
                    { x: 1996, y: 14 }, { x: 1997, y: 85 }, { x: 1998, y: 24 }, { x: 1999, y: 61 }, { x: 2000, y: 80 },
                    { x: 2001, y: 14 }, { x: 2002, y: 34 }, { x: 2003, y: 81 }, { x: 2004, y: 70 }, { x: 2005, y: 21 },
                    { x: 2006, y: 70 }, { x: 2007, y: 32 }, { x: 2008, y: 43 }, { x: 2009, y: 21 }, { x: 2010, y: 63 },
                    { x: 2011, y: 9 }, { x: 2012, y: 51 }, { x: 2013, y: 25 }, { x: 2014, y: 96 }, { x: 2015, y: 32 }

      ],
      seriesData1: [
                   { x: 1971, y: 23 }, { x: 1972, y: 67 }, { x: 1973, y: 83 }, { x: 1974, y: 43 }, { x: 1975, y: 8 },
                   { x: 1976, y: 41 }, { x: 1977, y: 56 }, { x: 1978, y: 31 }, { x: 1979, y: 29 }, { x: 1980, y: 87 },
                   { x: 1981, y: 43 }, { x: 1982, y: 12 }, { x: 1983, y: 38 }, { x: 1984, y: 67 }, { x: 1985, y: 49 },
                   { x: 1986, y: 67 }, { x: 1987, y: 83 }, { x: 1988, y: 16 }, { x: 1989, y: 89 }, { x: 1990, y: 18 },
                   { x: 1991, y: 46 }, { x: 1992, y: 39 }, { x: 1993, y: 68 }, { x: 1994, y: 87 }, { x: 1995, y: 45 },
                   { x: 1996, y: 42 }, { x: 1997, y: 28 }, { x: 1998, y: 82 }, { x: 1999, y: 13 }, { x: 2000, y: 83 },
                   { x: 2001, y: 26 }, { x: 2002, y: 57 }, { x: 2003, y: 48 }, { x: 2004, y: 84 }, { x: 2005, y: 64 },
                   { x: 2006, y: 24 }, { x: 2007, y: 82 }, { x: 2008, y: 37 }, { x: 2009, y: 68 }, { x: 2010, y: 37 },
                   { x: 2011, y: 35 }, { x: 2012, y: 81 }, { x: 2013, y: 38 }, { x: 2014, y: 51 }, { x: 2015, y: 58 }
      ],

    
        //Initializing Primary X Axis
        primaryXAxis: {
            minimum: 1970,
            maximum: 2016,
            majorGridLines: { width: 0 }
        },
 
        //Initializing Primary Y Axis
       primaryYAxis: {
            title: 'Sales',
            labelFormat: '{value}%',
            interval: 25,
            minimum: 0,
            maximum: 100,
            majorGridLines: { width: 0 }
        },
        chartArea: { border: { width: 0 } },

          selectdata : [ 'DragXY', 'DragX', 'DragY'],

       selectwidth:120,

        legendSettings: { visible: true, toggleVisibility: false },

        marker: {
                    shape: 'Triangle',
                    width: 10, height: 10
                },


         marker1: {
                    shape: 'Pentagon',
                    width: 10, height: 10
                },


        seriesMode: 'DragXY',
          
        title: "Profit Comparision of A and B"
      };
    },
    provide: {
      chart: [Selection, Legend, ColumnSeries, Category, ScatterSeries]
    },
    updated: function () {
    this.$nextTick(function() {
      this.$refs.chart.ej2Instances.dataBind();
      this.$refs.chart.ej2Instances.refresh();
    });
  },
    methods: {
      mode: function(){
          this.seriesMode=selmode.value;
      }
    },
   
  });
  </script>